<style lang="less" scoped>
  .order_wrap {padding-bottom: 1.3rem; background-color: #f3f3f3;}
  .cart_items {
    padding-bottom: 0.1rem; background-color: #f3f3f3;
    .cart_item {
      position: relative; width:100%; padding: 0.2rem 0.3rem; background-color: #fff; overflow: hidden; margin-bottom: 1px;
      .check {
        float: left; width: 0.44rem; height: 1rem;
        i { position: absolute; width: 0.4rem; height: 0.4rem; top: 0; bottom: 0; margin: auto 0; background: url("/static/images/icon_yq_f.png") no-repeat center; background-size: 0.33rem;}
        i.active {background: url("/static/images/icon_yq_t.png") no-repeat center; background-size: 0.33rem;}
      }
      .img_wrap {float: left; width: 1.52rem; height: 1.52rem;}
      .img_wrap img {width: 100%; height: 100%;}
      .con {
        float: right; width: 4.6rem; overflow: hidden;
        .top {float: left; width: 100%; height: 0.76rem; overflow: hidden; font-size: 0.24rem; color: #666; line-height: 0.36rem;}
        .mid {visibility: hidden; display:none; float: left; width: 100%; height: 0.32rem; text-align: right; color: #d3ac6f; font-size: 0.28rem; }
        .left {float: left; color: #d3ac6f; font-size: 0.28rem; margin-top: 0.2rem;}
        .right {float: right; font-size: 0.28rem;}
        .right span {display: block; color: #999; font-size: 0.28rem; margin-top: 0.2rem;}
      }
    }
  }
  .cart_bottom {
    position: fixed; width: 100%; bottom: 0; background-color: #fff; overflow: hidden; z-index: 9; box-sizing: border-box; border-top: 0.5px solid #c9c9c9;
    .check {
      float: left; width: 1.4rem; height: 1.2rem; line-height: 1.2rem; font-size: 0.3rem; color: #333; text-align: right;
      i { position: absolute; width: 0.4rem; height: 0.4rem; top: 0; left: 0.3rem; bottom: 0; margin: auto 0; background: url("/static/images/icon_yq_f.png") no-repeat center; background-size: 0.33rem;}
      i.active {background: url("/static/images/icon_yq_t.png") no-repeat center; background-size: 0.33rem;}
    }
    .btns {float: right;  width: 2rem; height: 1.2rem; line-height: 1.2rem; text-align: center; font-size: 0.3rem; background-color: #d3ac6f; color: #fff;}
    .value {float: left; margin-left: 0.3rem; height: 1.2rem; line-height: 1.2rem; font-size: 0.3rem; color: #d3ac6f;}
  }
  .adddress_wrap {
    position: relative; background-color: #fff; margin-bottom: 0.1rem;
    .icon_add {display: inline-block; height: 1.4rem; font-size: 0.28rem; line-height: 1.4rem; padding-left: 1.8rem;  background: url("/static/images/icon_add.png") no-repeat 0.5rem center; background-size: 0.82rem;}
    .icon_go {position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%); width: 0.22rem; height: 0.38rem;  background: url("/static/images/icon_go.png") no-repeat right center; background-size: 100%;}
  }
  .ads_item {
    position: relative; width:100%; padding: 0.3rem 0.3rem; margin-bottom: 0.1rem; background-color: #fff; overflow: hidden;
    .con {
      float: left; margin-left: 0.24rem; font-size: 0.28rem;
      div {color: #333;}
      div span {display: inline-block; width: 5em;}
      p {color: #999; width: 5.5rem; min-height: 0.3rem; margin-top: 0.15rem;}
    }
    .icon_go {position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%); width: 0.22rem; height: 0.38rem;  background: url("/static/images/icon_go.png") no-repeat right center; background-size: 100%;}
  }
  .popup_payment {
    .con {margin-bottom: 0; border-bottom: 0;}
    .tit {width: 100%; height: 0.88rem; text-align: center; line-height: 0.88rem; font-size: 0.28rem; color: #333; border: 1px solid #d3d3d3;}
    .value {color: #d3ac6f;}
    .btns_wrap {margin-bottom: 0; border: 0;}
    .btns {width: 1.4rem; height: 0.7rem; line-height: 0.7rem; margin: 10px 0; border-radius: 4px; background-color: #d3ac6f; color: #fff; text-align: center; font-size: 0.3rem;}
  }
</style>
<template>
   <div class="order_wrap">
      <router-link :to="{path: '/Address', query: {from: 'order'}}">
        <div class="adddress_wrap">
          <span class="icon_add">添加收货地址</span>
          <i class="icon_go"></i>
        </div>
        <div class="ads_item">
          <div class="con">
              <div><span>郑华源</span><em>18959271550</em></div>
              <p><yd-icon name="location" size="0.3rem" style="margin-right: 0.3em;"></yd-icon>福建省厦门市防护系列水电费都防护系列护系列水水</p>
          </div>
          <i class="icon_go"></i>
        </div>
      </router-link>
        
        <!--  -->
      <ul class="cart_items">
        <li class="cart_item" v-for="(item, index) in cartItems" :key="index">
          <!-- <div class="check"><i :class="'active'"></i></div> -->
          <div class="img_wrap"><img src="/static/images/list.png"></div>
          <div class="con">
            <p class="top">钻石分类产品名分类产品名分类产品名分类产品名分类产品名</p>
            <span class="mid">￥9999</span>
            <span class="left" style="ver">￥9999</span>
            <div class="right">
                <!-- <yd-spinner max="99" v-model="spinner3"></yd-spinner> -->
                <!-- <span>× 5</span> -->
            </div>
          </div>
        </li>
      </ul>
      <!--  -->
      <yd-cell-group>
          <yd-cell-item>
              <span slot="left">左边内容一</span>
              <span slot="right">右边内容一</span>
          </yd-cell-item>
          <yd-cell-item>
              <span slot="left">左边内容二</span>
              <span slot="right">右边内容二</span>
          </yd-cell-item>
          <yd-cell-item type="label">
            <div slot="left">设为默认地址 - {{ydswitch}}</div>
            <yd-switch slot="right" color="#d3ac6f" v-model="ydswitch"></yd-switch>
        </yd-cell-item>
      </yd-cell-group>
      <!-- 底部支付 -->
      <div class="cart_bottom">
        <!-- <div class="check"><i :class="'active'"></i>全选</div> -->
        <div class="btns"  @click="(show2 = true)">支付</div>
        <div class="value">合计：{{640.54}}</div>
      </div>
      <!-- 选择支付方式 -->
      <yd-popup class="popup_payment" v-model="show2" position="bottom" height="3.99rem">
          <div class="tit">选择支付方式</div>
          <yd-cell-group  class="con" title="">
            <yd-cell-item type="checkbox">
              <span slot="left">当前余额：{{9999}}</span>
              <input slot="right" type="radio" value="Han MeiMei" v-model="checkedNames"/>
            </yd-cell-item>
            <yd-cell-item type="checkbox">
              <span slot="left">银行卡支付</span>
              <input slot="right" type="radio" value="Li Lei" v-model="checkedNames"/>
            </yd-cell-item>
            <yd-cell-item>
              <span class="value" slot="left">总计：￥{{8562.25}}</span>
              <span class="btns" slot="right"><router-link to="/PayResult">支付</router-link></span>
            </yd-cell-item>
        </yd-cell-group>
      </yd-popup>
    </div>
</template>
<script>
export default {
  components: {
  
  },
  data() {
    return {
      cartItems: [1,2,3,1,1],
      spinner3: 0,
      ydswitch: true,
      show2: false,
      checkedNames: ['Han MeiMei']
    }
  },
  watch: {
    ydswitch() {
      console.log(this.ydswitch)
    }
  },
  created() {

  },
  methods: {
   
  },
  computed: {
    
  },
  methods: {
  
  }
}
</script>
